<template>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
</template>

<script setup>
</script>

<style scoped>
.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}
.container .item {
  scroll-snap-align: start;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}
.container .item:nth-child(1) {
  background: hotpink;
  color: white;
}
.container .item:nth-child(2) {
  background: azure;
}
.container .item:nth-child(3) {
  background: blanchedalmond;
}
.container div:nth-child(4) {
  background: lightcoral;
  color: white;
}
</style>